<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head th:replace="fragment/globalComponent::commonHead(~{::title},~{::link},~{::style})">
    <title>GoblinCwl - 博客管理</title>
    <link th:href="@{/css/manager.css}" rel="stylesheet"/>
    <link rel="stylesheet" th:href="@{/css/goblincwl/tablePage.css}">
    <link rel="stylesheet" th:href="@{/plugins/editormd/css/editormd.css}">
    <style>
        /*颜色显示*/
        .color-div {
            width: auto;
            height: 0.5rem;
        }
    </style>
</head>
<body>
<!-- 左侧侧边栏 -->
<div th:replace="fragment/manager/managerComponent::leftSiderBar"></div>

<!-- 页面内容 -->
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <div class="content">
        <!-- 顶部导航 -->
        <div th:replace="fragment/globalComponent::topHeader"></div>

        <div class="col-sm-12" style="padding: 0 10px;padding-top: 1em">
            <ul class="nav nav-tabs" id="navList">
                <li data-name="blogTab" class="active">
                    <a data-toggle="tab" href="#blogTab" onclick="refreshTable('blog-table')">
                        文章管理
                    </a>
                </li>
                <li data-name="blogTabsTab">
                    <a data-toggle="tab" href="#blogTabsTab" onclick="refreshTable('blogTabs-table')">
                        标签管理
                    </a>
                </li>
            </ul>
            <div class="tab-content" id="tabContent">
                <div id="blogTab" class="tab-pane active">
                    <div class="table-responsive">
                        <div id="blog-toolbar" class="btn-group">
                            <button id="blog-toolbar-add" type="button"
                                    class="btn btn-success btn-sm rightSize toolbarBtn">
                                <i class="glyphicon glyphicon-plus toolbarIcon" aria-hidden="true"></i>发布文章
                            </button>
                            <button id=blog-toolbar-edit type="button"
                                    class="btn btn-info btn-sm rightSize toolbarBtn">
                                <i class="glyphicon glyphicon-pencil toolbarIcon" aria-hidden="true"></i>编辑
                            </button>
                            <button id="blog-toolbar-remove" type="button"
                                    class="btn btn-danger btn-sm rightSize toolbarBtn">
                                <i class="glyphicon glyphicon-remove " aria-hidden="true"></i>删除
                            </button>
                        </div>
                        <div class="form-inline table-search">
                            <div class="form-group">
                                <label for="blog-query-title"></label>
                                <input type="text" class="form-control input-sm"
                                       id="blog-query-title"
                                       placeholder="文章标题">
                            </div>
                        </div>
                        <table id="blog-table" class="table table-condensed text-nowrap my-table"></table>
                    </div>
                </div>
                <div id="blogTabsTab" class="tab-pane">
                    <div class="table-responsive">
                        <div id="blogTabs-toolbar" class="btn-group">
                            <button id="blogTabs-toolbar-add" type="button"
                                    class="btn btn-success btn-sm rightSize toolbarBtn">
                                <i class="glyphicon glyphicon-plus toolbarIcon" aria-hidden="true"></i>添加
                            </button>
                            <button id=blogTabs-toolbar-edit type="button"
                                    class="btn btn-info btn-sm rightSize toolbarBtn">
                                <i class="glyphicon glyphicon-pencil toolbarIcon" aria-hidden="true"></i>修改
                            </button>
                            <button id="blogTabs-toolbar-remove" type="button"
                                    class="btn btn-danger btn-sm rightSize toolbarBtn">
                                <i class="glyphicon glyphicon-remove " aria-hidden="true"></i>删除
                            </button>
                        </div>
                        <div class="form-inline table-search">
                            <div class="form-group">
                                <label for="blog-query-title"></label>
                                <input type="text" class="form-control input-sm"
                                       id="blogTabs-query-name"
                                       placeholder="标签名">
                            </div>
                        </div>
                        <table id="blogTabs-table" class="table table-condensed text-nowrap my-table"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<div th:replace="fragment/globalComponent::commonFoot(~{::script})">
    <script th:src="@{/js/goblincwl/tablePage.js}" type="text/javascript"></script>
    <script th:src="@{/plugins/editormd/editormd.min.js}"></script>
    <script>
        $(function () {
            //左侧导航
            $("#managerBlogLi").addClass("active")
            initData('blogTab')
            initData('blogTabsTab')
        })

        //初始化表格
        function initData(name) {
            const tableOptions = genTableOptions();
            let url,                    //请求地址
                columns,                //列
                uniqueId,               //主键
                tableId,              //表格ID
                $table,                 //表格元素
                $toolbar,               //工具栏元素
                $singleBtnArray = [],   //单选按钮
                $multiBtnArray = [],    //多选按钮
                $queryInputArray = [];  //查询框
            switch (name) {
                case 'blogTab':
                    url = ctx + "/blog/list";
                    tableId = 'blog-table';
                    $table = $("#" + tableId);
                    $toolbar = $("#blog-toolbar");
                    uniqueId = "id";
                    //单选/多选按钮及事件
                    $("#blog-toolbar-add").on('click', function () {
                        blogAdd(tableId);
                    });
                    $singleBtnArray[0] = $("#blog-toolbar-edit");
                    $singleBtnArray[0].on('click', function () {
                        blogEdit(tableId)
                    });
                    $multiBtnArray[0] = $("#blog-toolbar-remove");
                    $multiBtnArray[0].on('click', function () {
                        blogRemove(tableId)
                    });
                    $queryInputArray[0] = $("#blogTab-query-title")
                    //自定义参数
                    tableOptions.queryParams = function (params) {
                        return $.extend(queryParams(params), {
                            title: $queryInputArray[0].val()
                        });
                    }
                    //其他
                    tableOptions.sortName = 'update_time';
                    tableOptions.sortOrder = 'desc';
                    columns = [
                        {
                            checkbox: true,
                        },
                        {
                            title: '操作',
                            formatter: function (value, row, index) {//赋予的参数
                                return genTableOptionA('#5bc0de', '编辑', 'glyphicon-pencil', 'blogEdit("' + tableId + '",' + JSON.stringify(row) + ')') +
                                    genTableOptionA('#d9534f', '删除', 'glyphicon-remove', 'blogRemove("' + tableId + '","' + row.id + '")')
                                    ;

                            }, //自定义方法，添加操作按钮,
                            switchable: false,
                            align: 'center',
                            width: 50,
                            cellStyle: function () {
                                const style = rowStyle(tableOptions);
                                style.css["border-right"] = "1px solid #ddd"
                                return style;
                            },
                        },
                        {
                            field: 'id',
                            title: '主键',
                            sortable: true,
                            align: 'center',
                            width: 50,
                        },
                        {
                            field: 'title',
                            title: '文章标题',
                            align: 'center',
                            width: 300
                        }, {
                            field: 'releaseTime',
                            title: '发布时间',
                            sortable: true,
                            sortName: "release_time",
                            align: 'center',
                        }, {
                            field: 'updateTime',
                            title: '更新时间',
                            sortable: true,
                            sortName: "update_time",
                            align: 'center',
                        }
                    ];
                    break;
                case 'blogTabsTab':
                    url = ctx + "/blog/blogTabs/list";
                    tableId = 'blogTabs-table';
                    $table = $("#" + tableId);
                    $toolbar = $("#blogTabs-toolbar");
                    uniqueId = "id";
                    //单选/多选按钮及事件
                    $("#blogTabs-toolbar-add").on('click', function () {
                        blogTabsAdd(tableId);
                    });
                    $singleBtnArray[0] = $("#blogTabs-toolbar-edit");
                    $singleBtnArray[0].on('click', function () {
                        blogTabsEdit(tableId)
                    });
                    $multiBtnArray[0] = $("#blogTabs-toolbar-remove");
                    $multiBtnArray[0].on('click', function () {
                        blogTabsRemove(tableId)
                    });
                    $queryInputArray[0] = $("#blogTabs-query-name")
                    //自定义参数
                    tableOptions.queryParams = function (params) {
                        return $.extend(queryParams(params), {
                            name: $queryInputArray[0].val()
                        });
                    }
                    columns = [
                        {
                            checkbox: true,
                        },
                        {
                            title: '操作',
                            formatter: function (value, row, index) {//赋予的参数
                                return genTableOptionA('#5bc0de', '编辑', 'glyphicon-pencil', 'blogTabsEdit("' + tableId + '",' + JSON.stringify(row) + ')') +
                                    genTableOptionA('#d9534f', '删除', 'glyphicon-remove', 'blogTabsRemove("' + tableId + '","' + row.id + '")')
                                    ;

                            },
                            switchable: false,
                            align: 'center',
                            width: 50,
                            cellStyle: function () {
                                const style = rowStyle(tableOptions);
                                style.css["border-right"] = "1px solid #ddd"
                                return style;
                            },
                        },
                        {
                            field: 'id',
                            title: '主键',
                            sortable: true,
                            align: 'center',
                            width: 50,
                        },
                        {
                            field: 'name',
                            title: '标签名称',
                            align: 'center',
                            width: 500
                        }, {
                            field: 'color',
                            title: '标签颜色',
                            align: 'center',
                            formatter: function (value, row, index) {
                                return "" +
                                    "<div class='color-div' style='background-color: " + row.color + "'></div>";
                            }
                        }
                    ];
                    break;
            }


            //渲染表格
            $table.bootstrapTable(pushParamTableOptions(
                tableOptions,
                "GET",
                url,
                columns,
                uniqueId,
                $toolbar,
                $table,
                $singleBtnArray,
                $multiBtnArray,
                $queryInputArray
            ));
            //刷新按钮状态
            $table.bootstrapTable('getOptions').onUncheckAll();
        }


    </script>

    <!--文章管理-->
    <script>
        /*发布文章*/
        function blogAdd(tableId) {
            xtip.open({
                type: 'url',
                content: '/manager/editBlog?tableId=' + tableId,
                title: '发布文章',
                lock: true,
                width: '100%',
                height: '100%',
                min: true,
                shadeClose: false,
                shade: false,
                max: true,
                closeBtn: true,
            });
        }

        /*编辑*/
        function blogEdit(tableId, row) {
            //获取选择的数据
            if (row == null) {
                //复选框所选数据
                const checkIdList = $("#" + tableId).bootstrapTable('getAllSelections');
                if (checkIdList.length === 1) {
                    row = checkIdList[0];
                } else {
                    xtip.msg("请选择一行数据", {icon: 'e', type: 'w'})
                    return;
                }
            }

            xtip.open({
                type: 'url',
                content: '/manager/editBlog?id=' + row.id + '&tableId=' + tableId,
                title: '编辑 - ' + row.title,
                lock: true,
                width: '100%',
                height: '100%',
                min: true,
                shadeClose: false,
                shade: false,
                max: true,
                closeBtn: true,
            });
        }

        /*删除*/
        function blogRemove(tableId, id) {
            const $table = getTable(tableId);
            //获取选择的数据
            if (id == null) {
                id = '';
                //复选框所选数据
                const checkIdList = $table.bootstrapTable('getAllSelections');
                if (checkIdList.length <= 0) {
                    xtip.msg("请选择一行数据", {icon: 'e', type: 'w'})
                    return;
                }
                for (let i = 0; i < checkIdList.length; i++) {
                    let checkIdListElement = checkIdList[i];
                    id += checkIdListElement.id += ",";
                }
            }
            const winId = xtip.confirm('确认删除所选数据？', function () {
                ajaxHttp({
                    type: "DELETE",
                    url: ctx + "/blog/remove",
                    data: {
                        ids: id
                    },
                    winId: winId,
                    success: function (res) {
                        xtip.msg(res.msg, {icon: 's', type: 'w'})
                        $table.bootstrapTable('refresh');
                        $table.bootstrapTable('getOptions').onUncheckAll();
                    },
                })
            }, {icon: ['', '#d9534f']});
        }
    </script>

    <!--标签管理-->
    <script>
        /*新增*/
        function blogTabsAdd(tableId) {
            const $table = getTable(tableId);
            const winId = xtip.win({
                type: 'confirm',
                btn: ['保存', '取消'],
                icon: ['', '#5cb85c'],
                tip:
                    '<form class="form-horizontal validateForm">\n' +
                    '  <div class="form-group">\n' +
                    '    <label for="blogTabs-add-name" class="col-sm-2 control-label xtip-label">标签名称</label>' +
                    '    <div class="col-sm-10 xtip-input">' +
                    '      <input type="text" class="form-control input-sm table-modal-input required" ' +
                    '           id="blogTabs-add-name" placeholder="name" oninput="inputValidate($(this))">' +
                    '    </div>' +
                    '  </div>\n' +
                    '  <div class="form-group">\n' +
                    '    <label for="blogTabs-add-color" class="col-sm-2 control-label xtip-label">标签颜色</label>' +
                    '    <div class="col-sm-10 xtip-input">' +
                    '      <input type="color" class="form-control input-sm table-modal-input" ' +
                    '           id="blogTabs-add-color" placeholder="color">' +
                    '    </div>' +
                    '  </div>\n' +
                    '</form>'
                ,
                title: "新增标签",
                width: '600px',
                shadeClose: false,
                btn1: function () {
                    ajaxHttp({
                        type: "POST",
                        url: ctx + "/blog/blogTabs/add",
                        data: {
                            name: $("#blogTabs-add-name").val(),
                            color: $("#blogTabs-add-color").val(),
                        },
                        winId: winId,
                        success: function (res) {
                            xtip.msg(res.msg, {icon: 's', type: 'w'})
                            $table.bootstrapTable('refresh');
                        },
                    })
                }
            });
        }

        /*修改*/
        function blogTabsEdit(tableId, row) {
            const $table = getTable(tableId);
            //获取选择的数据
            if (row == null) {
                //复选框所选数据
                const checkIdList = $table.bootstrapTable('getAllSelections');
                if (checkIdList.length === 1) {
                    row = checkIdList[0];
                } else {
                    xtip.msg("请选择一行数据", {icon: 'e', type: 'w'})
                    return;
                }
            }
            //回显
            ajaxHttp({
                type: "GET",
                url: ctx + "/blog/blogTabs/" + row.id,
                success: function (res) {
                    const winId = xtip.win({
                        type: 'confirm', //alert 或 confirm
                        btn: ['保存', '取消'],
                        icon: ['', '#5bc0de'],
                        width: '600px',
                        tip:
                            '<form class="form-horizontal validateForm">\n' +
                            '  <div class="form-group">\n' +
                            '    <label for="blogTabs-add-name" class="col-sm-2 control-label xtip-label">标签名称</label>' +
                            '    <div class="col-sm-10 xtip-input">' +
                            '      <input type="text" class="form-control input-sm table-modal-input required" ' +
                            '       id="blogTabs-add-name" placeholder="name" value="' + res.data.name + '" oninput="inputValidate($(this))">' +
                            '    </div>' +
                            '  </div>\n' +
                            '  <div class="form-group">\n' +
                            '    <label for="blogTabs-add-color" class="col-sm-2 control-label xtip-label">标签颜色</label>' +
                            '    <div class="col-sm-10 xtip-input">' +
                            '      <input type="color" class="form-control input-sm table-modal-input" ' +
                            '       id="blogTabs-add-color" placeholder="color" value="' + res.data.color + '">' +
                            '    </div>' +
                            '  </div>\n' +
                            '</form>'
                        ,
                        title: "修改标签",
                        shadeClose: false,
                        btn1: function () {
                            ajaxHttp({
                                type: "PUT",
                                url: ctx + "/blog/blogTabs/edit",
                                data: {
                                    id: res.data.id,
                                    name: $("#blogTabs-add-name").val(),
                                    color: $("#blogTabs-add-color").val(),
                                },
                                winId: winId,
                                success: function (res) {
                                    xtip.msg(res.msg, {icon: 's', type: 'w'})
                                    $table.bootstrapTable('refresh');
                                    $table.bootstrapTable('getOptions').onUncheckAll();
                                },
                            })
                        }
                    });
                },
            })
        }

        /*删除*/
        function blogTabsRemove(tableId, id) {
            const $table = getTable(tableId);
            //获取选择的数据
            if (id == null) {
                id = '';
                //复选框所选数据
                const checkIdList = $table.bootstrapTable('getAllSelections');
                if (checkIdList.length <= 0) {
                    xtip.msg("请选择一行数据", {icon: 'e', type: 'w'})
                    return;
                }
                for (let i = 0; i < checkIdList.length; i++) {
                    let checkIdListElement = checkIdList[i];
                    id += checkIdListElement.id += ",";
                }
            }
            const winId = xtip.confirm('确认删除所选数据？', function () {
                ajaxHttp({
                    type: "DELETE",
                    url: ctx + "/blog/blogTabs/remove",
                    data: {
                        ids: id
                    },
                    winId: winId,
                    success: function (res) {
                        xtip.msg(res.msg, {icon: 's', type: 'w'})
                        $table.bootstrapTable('refresh');
                        $table.bootstrapTable('getOptions').onUncheckAll();
                    },
                })
            }, {icon: ['', '#d9534f']});
        }
    </script>
</div>
</html>